<!--
分页demo

注意点：
单个后端分页列表写法与列表页FpsHelper无太大差别,注意pageName要令起一个,最好是列表页pageName+ '_功能名称'这种格式 防止与列表页的列配置冲突
多个后端分页列表需要重新将FpsInfo等重新命名,写法参考下方
前端分页与之前写法没差

-->
<template>
  <q-page class="q-pa-md">
    <div class="q-pb-md text-h5">
      {{pageTitle}}
      <span class="text-subtitle1">
        此demo用于参考详情页的列表由后端分页、包含多个后端分页列表以及前端分页时分页功能的写法
      </span></div>
    <div class="q-pa-sm shadow-2 row">
      <div class="q-gutter-sm">
        <q-btn @click="detailNav.goBackToList" color="primary" icon="arrow_back" outline title="返回" />
        <q-btn :disable="loadingState" :loading="loadingState" @click="loadModelData" color="primary" dense
          icon="refresh" outline title="刷新" />
      </div>
    </div>
    <div class="shadow-2 q-mt-md">
      <q-tabs active-color="primary" align="left" dense indicator-color="primary" v-model="showingTabPanel">
        <q-tab label="主档" name="detail" />
        <q-tab label="后端分页1" name="lineTable" />
        <q-tab label="后端分页2" name="lineTable2" />
        <q-tab label="前端分页" name="lineTable3" />
      </q-tabs>
      <q-separator />
      <q-tab-panels v-model="showingTabPanel" keep-alive
        :keep-alive-include="['detail','lineTable']">
        <q-tab-panel class="q-pa-sm" name="detail">
          <q-banner class="text-white bg-red q-mt-sm" dense inline-actions v-if="serverErrorMessage">
            {{serverErrorMessage}}
            <template v-slot:action>
              <q-btn @click="serverErrorMessage=''" dense flat icon="close" size="sm" />
            </template>
          </q-banner>
          <form-field-group title="主要信息" :model-with-create-update="$d.form" model-id="orderId" class="q-mt-sm">
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>订单号</span>
                  <easy-input v-model="$d.form.orderNo" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>订单日期</span>
                  <easy-input v-model="$d.form.orderDt" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>订单总额</span>
                  <easy-input v-model="$d.form.orderPrice" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>客户名称</span>
                  <easy-input v-model="$d.form.customerName" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>收货地址</span>
                  <easy-input v-model="$d.form.address" readonly/>
                </div>
                <div class="col-12">
                  <span>备注</span>
                  <easy-input v-model="$d.form.description" readonly/>
                </div>
              </div>
            </div>
          </form-field-group>
        </q-tab-panel>
        <q-tab-panel class="q-pa-none" name="lineTable">
          <div class="row q-col-gutter-sm q-mb-sm items-center q-pt-sm">
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
              <div class="col-4 text-right searchbar-label">料号</div>
              <div class="col-8">
                <easy-input v-model="lineFpsReq.sku" :readonly="lineListDataLoadingState" select-all-on-focus
                  @keyup.enter="loadLineListData(2)" />
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
              <div class="col-4 text-right searchbar-label">金额范围从</div>
              <div class="col-8">
                <easy-input v-model="lineFpsReq.priceBegin" :readonly="lineListDataLoadingState" select-all-on-focus
                  @keyup.enter="loadLineListData(2)" />
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
              <div class="col-4 text-right searchbar-label">金额范围至</div>
              <div class="col-8">
                <easy-input v-model="lineFpsReq.priceEnd" :readonly="lineListDataLoadingState" select-all-on-focus
                  @keyup.enter="loadLineListData(2)" />
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
              <div>
                <q-btn color="primary" icon="search" label="查询" @click="loadLineListData(2)" class="col-auto" />
              </div>
            </div>
          </div>
          <q-separator />
          <q-table :columns="fpsInfo.columnsInfo" :rows="$d.lineTableData" :loading="lineListDataLoadingState"
            :visible-columns="fpsInfo.visibleColumns" v-model:pagination="fpsInfo.paginationInfo"
            color="primary" dense flat row-key="orderLineId" separator="cell">
            <template v-slot:top="props">
              <q-space />
              <table-col-options-cfg v-model:visible-columns="fpsInfo.visibleColumns"
                v-model:table-columns="fpsInfo.columnsInfo" class="q-mx-sm"
                @update-col-options-for-save="fpsAssist.saveColOptions"></table-col-options-cfg>
              <q-btn :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen"
                class="q-ml-sm" dense flat />
            </template>
            <template v-slot:no-data>
              <div class="full-width text-center">
                <q-icon name="error_outline" />
                无数据
              </div>
            </template>
            <!--客户端分页-->
            <template v-slot:bottom>
              <paging-bar :loading-state="lineListDataLoadingState" :pageNo="lineFpsReq.pageNo" :pageSize="lineFpsReq.pageSize"
                :totalAmount="fpsInfo.totalAmount" @pagesize-changed="fpsAssist.onPageSizeChanged"
                @go-to-page="fpsNav.gotoPage" />
            </template>
          </q-table>
        </q-tab-panel>
        <q-tab-panel class="q-pa-none" name="lineTable2">
          <q-table :columns="fpsInfoCustomer.columnsInfo" :rows="$d.lineTableData2" :loading="customerListDataLoadingState"
            :visible-columns="fpsInfoCustomer.visibleColumns" v-model:pagination="fpsInfoCustomer.paginationInfo"
            color="primary" dense flat row-key="cId" separator="cell">
            <template v-slot:top="props">
              <q-space />
              <table-col-options-cfg v-model:visible-columns="fpsInfoCustomer.visibleColumns"
                v-model:table-columns="fpsInfoCustomer.columnsInfo" class="q-mx-sm"
                @update-col-options-for-save="fpsAssistCustomer.saveColOptions"></table-col-options-cfg>
              <q-btn :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen"
                class="q-ml-sm" dense flat />
            </template>
            <template v-slot:no-data>
              <div class="full-width text-center">
                <q-icon name="error_outline" />
                无数据
              </div>
            </template>
            <template v-slot:body-cell-isVip="props">
              <q-td :props="props" auto-width>
                <q-badge :color="props.row.isVip?'positive':'grey-6'"
                  :label="props.row.isVip ? '是' : '否'" />
              </q-td>
            </template>
            <!--客户端分页-->
            <template v-slot:bottom>
              <paging-bar :loading-state="customerListDataLoadingState" :pageNo="lineFpsReqC.pageNo" :pageSize="lineFpsReqC.pageSize"
                :totalAmount="fpsInfoCustomer.totalAmount" @pagesize-changed="fpsAssistCustomer.onPageSizeChanged"
                @go-to-page="fpsNavCustomer.gotoPage" />
            </template>
          </q-table>
        </q-tab-panel>
        <q-tab-panel class="q-pa-none" name="lineTable3">
          <q-table :columns="columnsInfoLine" :rows="$d.form.lines" v-model:pagination="$d.paginationInfo"
            :hide-pagination="true" dense row-key="orderLineId" separator="cell" flat :visible-columns="$d.visibleColumns"
            :loading="lineListDataLoadingState"
            color="primary">
            <template v-slot:top="props">
              <q-space />
              <table-col-options-cfg v-model:table-columns="columnsInfoLine"
                v-model:visible-columns="$d.visibleColumnsMfOrg"
                @update-col-options-for-save="(optToSave)=>dlAssist.saveDetailColOptions('columnsAll',optToSave)"
                class="q-ml-sm">
              </table-col-options-cfg>
              <q-btn :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen"
                :title="props.inFullscreen ? '退出全屏' : '全屏显示'" class="q-ml-sm" dense flat :ripple="false" />
            </template>
            <template v-slot:no-data>
              <div class="full-width text-center">
                <q-icon name="error_outline" />
                无数据
              </div>
            </template>
            <!--客户端分页-->
            <template v-slot:bottom>
              <paging-bar :loading-state="loadingState" :pageNo="$d.paginationInfo.page"
                :pageSize="$d.paginationInfo.rowsPerPage" :restrict-input-page-no="true"
                :show-refresh-button="false" :totalAmount="$d.form.lines.length"
                @go-to-page="(pageNo)=>{$d.paginationInfo.page=pageNo}"
                @pagesize-changed="(pageSize)=>{$d.paginationInfo.rowsPerPage=pageSize; dlAssist.saveDetailPageSize('columnsAll',pageSize)}" />
            </template>
          </q-table>
        </q-tab-panel>
      </q-tab-panels>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'LineFpsHelperDemo'
}
</script>

<script lang="ts" setup>

import {useTitleHelper} from 'src/lib/hooks/titleHelper'
import {useDetailHelper} from 'src/lib/hooks/detailHelper'
import {reactive, ref} from 'vue'
import EasyInput from 'src/lib/components/EasyInput.vue'
import {ColumnInfo, FpsReq, FpsResp} from 'src/lib/defs/comm'
import {useFpsHelper} from 'src/lib/hooks/fpsHelper'

const pageTitle = '分页demo'
useTitleHelper(pageTitle)

// region 定义 不用看
interface GetMyOrderLineReq extends FpsReq {
  orderId: number | null
  sku: string | null
  priceBegin: number | null
  priceEnd: number | null
}

interface MyOrderInfo {
  orderId: number
  orderNo: string
  orderDt: string
  orderPrice: number
  customerName: string
  address: string
  description: string
  lines: MyOrderLineInfo[]
}

interface GetMyOrderLineResp {
  orderId: number | null
  sku: string | null
  priceBegin: number | null
  priceEnd: number | null
  myOrderLineInfos: MyOrderLineInfo[]
}

export interface MyOrderLineInfo {
  //  明细ID
  orderLineId: number
//  主档ID
  orderId: number
//  料号
  sku: string
//  数量
  qty: number
//  单价
  price: number
//  金额
  totalPrice: number
//  描述
  description: string

}


interface GetCustomerListReq extends FpsReq{
  orderId: number
}

interface GetCustomerListResp extends FpsResp {
  orderId: number
  customerInfos: CustomerInfo[]
}

interface CustomerInfo {
  cId: number
  orderId: number
  customerName: string | null
  address: string
  isVip: boolean
}

// endregion

let serverErrorMessage = ref('')
let loadingState = ref(false)
let showingTabPanel = ref('detail')

const $d = reactive({
  form: {} as MyOrderInfo,
  lineTableData: [] as MyOrderLineInfo[],
  lineTableData2: [] as CustomerInfo[],
  visibleColumns: [] as string[],
  paginationInfo: {
    // 页码
    page: 1,
    // 每页多少条
    rowsPerPage: 40,
    // 是否倒序
    descending: false,
    // 按什么排序
    sortBy: 'sortId',
  },
})

const loadModelData = function () {
  serverErrorMessage.value = ''
  loadingState.value = true
  $f.axios
    .get<MyOrderInfo>('/misc-test/get-myorder-by-id/' + detailInfo.itemId)
    .then((resp) => {
      resp.data.orderDt = $f.fmt.dtFmtDateOnly(resp.data.orderDt)
      $d.form = resp.data
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      loadingState.value = false
    })
}

// 主档帮助方法
const {
  detailInfo,
  detailNav,
  dlAssist
} = useDetailHelper('/demo/line-fps-helper-demo',
  $d.form,
  null,
  '/demo/line-fps-helper-demo',
  '/demo/line-fps-helper-demo/detail',
  null,
  null,
  loadModelData,
  serverErrorMessage,
)

let lineFpsReq: GetMyOrderLineReq = reactive({
  sku: null,
  priceBegin: null,
  priceEnd: null,
  orderId: Number(detailInfo.itemId),
  pageNo: 1,
  pageSize: 40,
  orderBy: null,
  isDescending: false
})

let lineListDataLoadingState = ref(false)


// 列定义
let columnsInfoLine: ColumnInfo[] = [
  {
    label: '明细ID',
    name: 'orderLineId',
    field: 'orderLineId',
    align: 'left',
    defOrder: 1,
    sortable: false,
    defVisible: true
  },
  {
    label: '主档ID',
    name: 'orderId',
    field: 'orderId',
    align: 'left',
    defOrder: 2,
    sortable: false,
    defVisible: true
  },
  {
    label: '料号',
    name: 'sku',
    field: 'sku',
    align: 'left',
    defOrder: 3,
    sortable: false,
    defVisible: true
  },
  {
    label: '数量',
    name: 'qty',
    field: 'qty',
    align: 'left',
    defOrder: 4,
    sortable: false,
    defVisible: true
  },
  {
    label: '单价',
    name: 'price',
    field: 'price',
    align: 'left',
    defOrder: 5,
    sortable: false,
    defVisible: true
  },
  {
    label: '金额',
    name: 'totalPrice',
    field: 'totalPrice',
    align: 'left',
    defOrder: 6,
    sortable: false,
    defVisible: true
  },
  {
    label: '描述',
    name: 'description',
    field: 'description',
    align: 'left',
    defOrder: 7,
    sortable: false,
    defVisible: true
  },

]

// 加载明细数据 新写法后端分页时不需要再在loadModelData里调用一次
const loadLineListData = function (resetFpsReq?: number) {
  if (resetFpsReq) {
    if (resetFpsReq >= 1) {
      lineFpsReq.pageNo = 1
    }
    if (resetFpsReq >= 2) {
      lineFpsReq.orderBy = ''
      lineFpsReq.isDescending = false
    }
  }
  lineListDataLoadingState.value = true
  $f.axios
    .get<GetMyOrderLineResp>('/misc-test/get-myorder-lines', {params: lineFpsReq})
    .then((resp) => {
      fpsAssist.handleGenericFpsResp(resp.data)
      $d.lineTableData = resp.data.myOrderLineInfos
      fpsAssist.saveFpsReq(lineFpsReq)
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      lineListDataLoadingState.value = false
    })
}

// FPS配置,注意pageName需要和列表页的pageName区分开,否则会出现列显示localstorage覆盖的问题
// 若有多个FpsHelper 第二个的写法有所不同 见下方代码
const {
  fpsInfo,
  fpsAssist,
  fpsNav
} = useFpsHelper('/demo/line-fps-helper-demo_line',
  null,
  null,
  null,
  lineFpsReq, columnsInfoLine,
  null,
  loadLineListData)


let lineFpsReqC: GetCustomerListReq = reactive({
  orderId: Number(detailInfo.itemId),
  pageNo: 1,
  pageSize: 40,
  orderBy: null,
  isDescending: false
})

const columnsInfoLineC: ColumnInfo[] = [
  {
    label: '客户ID',
    name: 'cId',
    field: 'cId',
    align: 'left',
    defOrder: 1,
    sortable: false,
    defVisible: true
  },
  {
    label: '订单ID',
    name: 'orderId',
    field: 'orderId',
    align: 'left',
    defOrder: 2,
    sortable: false,
    defVisible: true
  },
  {
    label: '客户名',
    name: 'customerName',
    field: 'customerName',
    align: 'left',
    defOrder: 3,
    sortable: false,
    defVisible: true
  },
  {
    label: '客户地址',
    name: 'address',
    field: 'address',
    align: 'left',
    defOrder: 4,
    sortable: false,
    defVisible: true
  },
  {
    label: '是否会员',
    name: 'isVip',
    field: 'isVip',
    align: 'left',
    defOrder: 5,
    sortable: false,
    defVisible: true
  },

]

let customerListDataLoadingState = ref(false)

// 第二个后端分页的列表加载
const loadCustomerListData = function (resetFpsReq?: number) {
  if (resetFpsReq) {
    if (resetFpsReq >= 1) {
      lineFpsReqC.pageNo = 1
    }
    if (resetFpsReq >= 2) {
      lineFpsReqC.orderBy = ''
      lineFpsReqC.isDescending = false
    }
  }
  customerListDataLoadingState.value = true
  $f.axios
    .get<GetCustomerListResp>('/misc-test/get-customer-lines', {params: lineFpsReqC})
    .then((resp) => {
      fpsAssistCustomer.handleGenericFpsResp(resp.data)
      $d.lineTableData2 = resp.data.customerInfos
      fpsAssistCustomer.saveFpsReq(lineFpsReqC)
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      customerListDataLoadingState.value = false
    })
}

// 第二个后端分页列表的fpsHelper,注意点在于Fps相关信息需要重新解构赋值
// pageName也需要与详情页其他fpsHelper的pageName、大列表页的pageName不同 所以建议使用pageName+'_功能名的方法命名避免冲突'
const {
  fpsInfo: fpsInfoCustomer,
  fpsAssist: fpsAssistCustomer,
  fpsNav: fpsNavCustomer
} = useFpsHelper('/demo/line-fps-helper-demo_customer',
  null,
  null,
  null,
  lineFpsReqC, columnsInfoLineC,
  null,
  loadCustomerListData)

// 前端分页的数据加载 没啥好说的
let colsInfoSaved = dlAssist.loadDetailColOptions('columnsAll', columnsInfoLine)
columnsInfoLine = colsInfoSaved[0]
$d.visibleColumns = colsInfoSaved[1]
$d.paginationInfo.rowsPerPage = dlAssist.loadDetailPageSize('columnsAll')

</script>

<style scoped>

</style>
